import React,{Component} from "react";
import "./remark.css"
import axios from "axios";
import Cookies from "js-cookie";
import Top_remark from "./top";
import {Avatar, Button, Comment, Form, Input, List} from "antd";
import moment from "moment";
import "../../../../config.js"

const { TextArea } = Input;

const ref_url = global.routes.database;

const Editor = ({ onChange, onSubmit, submitting, value }) => (
    <div>
        <Form.Item>
            <TextArea rows={4} onChange={onChange} value={value} />
        </Form.Item>
        <Form.Item>
            <Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
                Add Comment
            </Button>
        </Form.Item>
    </div>
);

class Remark extends React.Component{
    constructor(props) {
        super(props);
        const blogID = this.props.location.state.blogID;
        this.state={
            comment_list:[],
            blog:[],
            avatar:require('../../imgs/1.jpg'),
            blogID:blogID,
            submitting: false,
            value: '',
            nickname:"Mary"
        };
        this.getBlog = this.getBlog.bind(this);
        this.getBlogComm = this.getBlogComm.bind(this);
        this.keepcomm = this.keepcomm.bind(this);
    }

    componentDidMount() {
        // const blogID = this.props.location.state.blogID
        // console.log(this.state.blogID)
        this.getBlog();
        this.getBlogComm();
    }

    handleSubmit = () => {
        if (!this.state.value) {
            return;
        }
        this.keepcomm();
        this.setState({
            submitting: true,
        });

        setTimeout(() => {
            this.setState({
                submitting: false,
                value: '',
                comment_list: [
                    {
                        nickName: '未知用户',
                        avatar: require("../../imgs/1.jpg"),
                        comment: <p>{this.state.value}</p>,
                        datetime: moment().fromNow(),
                    },
                    ...this.state.comment_list,
                ],
            });
        }, 1000);
    };

    handleChange = e => {

        this.setState({
            value: e.target.value,
        });

    };

    //随机ID
    genID(length){
        return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
    }


    //获取blog内容
    getBlog(){
        // console.log(this.state.blogID)
        axios.get(ref_url+"/getBlog",{params:{
                blogID: this.state.blogID
            }
        }).then(res=>{

            if(res.data.Data){
                this.setState({
                    blog:res.data.Data[0]
                })
            }
        })
    }

    //获取评论内容
    //global.routes.database+
    getBlogComm(){
        // console.log(this.state.blogID)
        //获取评论
        axios.get(ref_url+"/getBlogComment",{params:{
                blogID:this.state.blogID
            }
        }).then(res=>{
            if(res.data.Data){
                //获取昵称
                for(var i=0;i<res.data.Data.length;i++){
                    let the_com = res.data.Data[i].comment;
                    axios.get(ref_url+"/getNickName",{params:{
                            phoneNum:res.data.Data[i].com_phone_num
                        }}).then(result=>{
                            if(result.data.Data){
                                let comm_dic = {};
                                comm_dic.comment = the_com;
                                comm_dic.nickName = result.data.Data;
                                comm_dic.actions = [<span key="comment-list-reply-to-0">Reply to</span>];
                                this.setState({
                                    comment_list:this.state.comment_list.concat(comm_dic),
                                })
                            }else{
                                let comm_dic = {};
                                comm_dic.comment = the_com;
                                comm_dic.nickName = "未知用户";
                                comm_dic.actions = [<span key="comment-list-reply-to-0">Reply to</span>];
                                this.setState({
                                    comment_list:this.state.comment_list.concat(comm_dic),
                                })
                            }

                    })
                }


            }else{
                this.setState({
                    comment_list:"评论为空",
                })
            }

        })
    }

    keepcomm(){

        //copy comment_list 数组
        const {comment_list} = this.state;
        //获取phoneNum
        var phoneNum = Cookies.get("phoneNum");
        if(phoneNum==null){
            phoneNum = "13362438860"
        }
        if(this.state.value!=null){
            var new_comm = {
                "blogID":this.state.blogID,
                "comment":this.state.value,
                "com_phone_num":phoneNum,
                "commentID":this.genID(10)
            };


            axios.get(ref_url+"/setBlogComment",{params:{
                    blogID:new_comm.blogID,
                    comment:new_comm.comment,
                    com_phone_num:new_comm.com_phone_num,
                    commentID:new_comm.commentID
                }
            }).then(res=>{
                console.log(res);
            })
        }
    }


    render() {
        const { comment_list, submitting, value } = this.state;
        //评论内容
            //遍历评论内容

        const  CommentList =(
                <List
                    className="comment-list"
                    dataSource={this.state.comment_list}
                    header={`${this.state.comment_list.length} ${this.state.comment_list.length > 1 ? 'replies' : 'reply'}`}
                    itemLayout="horizontal"
                    renderItem={item => (
                        <li>
                            <Comment
                                actions={item.actions}
                                author={item.nickName}
                                avatar={require('../../imgs/2.jpg')}
                                content={item.comment}
                            />
                        </li>
                    )}
                />
            );


        return (
            <div className="body_remark">
                <Top_remark/>

                <div className="container">
                    <div className="d-flex justify-content-start">
                        <img className="pic_r" src={require('../../imgs/1.jpg')} alt="头像"/>
                        <div className="d-flex flex-column bd-highlight mb-3">
                            <label className="nickname">{this.state.nickname}</label>
                            <label className="pub_time">{this.state.blog.pubTime}</label>
                        </div>
                    </div>
                    <div className="blog_con">
                        {this.state.blog.words}
                    </div>
                </div>


                    {/*发表评论*/}
                <div className="comm container">

                    {CommentList}
                    <Comment
                        avatar={
                            <Avatar
                                src={require("../../imgs/1.jpg")}
                                alt="未知用户"
                            />
                        }
                        content={
                            <Editor
                                onChange={this.handleChange}
                                onSubmit={this.handleSubmit}
                                submitting={submitting}
                                value={value}
                            />
                        }
                    />
                </div>
            </div>
        );
    }

}

export default Remark;